<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 500px;
    margin: 100px auto 0;
}
.ipt{
    width: 500px;
    padding: 6px 10px;
    font-size: 18px;
    box-sizing: border-box;
}
.list li{
    line-height: 40px;
    padding: 0 10px;
    background-color: #eee;
}
.list li:hover{
    background-color: #ccc;
}
</style>
</head>
<body>
    
<div class="wrap">
    <input type="text" class="ipt">
    <ul class="list">
        <!-- <li>1 皇宫集合框架构建和</li>
        <li>2 火箭进攻机会就快来了</li>
        <li>3 就会机构行家</li> -->
    </ul>
</div>

<script>
let ipt = document.querySelector('.ipt')
let list = document.querySelector('.list')
ipt.onkeyup = function (){
    let val = ipt.value

    // 空值判断
    if (!val) {
        list.innerHTML = ''
        return
    }

    // 创建script标签
    let Script = document.createElement('script')
    // 给script标签的src属性赋值
    Script.src = 'https://suggestion.baidu.com/su?cb=render&wd='+val
    // 将script标签添加到页面中
    document.body.appendChild(Script)
    // 数据加载完成后删除Script标签
    Script.onload = function (){
        this.remove()
    }
}

function render(data){
    // console.log( data )// 响应的数据
    let tmp = ''
    data.s.forEach((item)=>{
        tmp += `<li>${item}</li>`
    })
    list.innerHTML = tmp
}
</script>
</body>
</html>